
import { ElMessage } from "element-plus";
import { createRouter, createWebHistory } from "vue-router";


let routes= [
    {
        path: '/',
        name: 'app',
        //使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
        component: () => import('@/App.vue'),
        children: [
            {
                path: "/",
                name: "welcome",
                component: () => import("@/views/welcome.vue")
            },
            {
                path: "/home",
                name: "Main",
                component: () => import("@/views/Main.vue")
            },
            {
              path: "/login",
              name: "login",
              component: () => import("@/views/account/Login.vue"),
            },
            //后面要加页面的路由在这加
            {
                path: "/register",
                name: "register",
                component: () => import("@/views/account/Register.vue")
            },
            {
                path: "/account/edit",
                name: "editAccount",
                component: () => import("@/views/account/EditAccount.vue"),
                meta: {
                    isAuth: true,   // 配置是否需要
                }
            },
            {
                path: "/cart",
                name: "cart",
                component: () => import("@/views/cart/Cart.vue")
            },
            {
                path: "/catalog/category",
                name: "category",
                component: () => import("@/views/catalog/Category.vue")
            },
            {
                path: `/catalog/:categoryId/products`,
                name: "product",
                component: () => import("@/views/catalog/Product.vue")
            },
            {
                path: "/catalog/:categoryId/products/:productId/items",
                name: "item",
                component: () => import("@/views/catalog/Item.vue")
            },
            {
                path: "/order/add",
                name: "addOrder",
                component: () => import("@/views/order/AddOrder.vue"),
                meta: {
                    isAuth: true,   // 配置是否需要
                }
            },
            {
                path: "/order/confirm",
                name: "confirmOrder",
                component: () => import("@/views/order/ConfirmOrder.vue"),
                meta: {
                    isAuth: true,   // 配置是否需要
                }
            },
            {
                path: "/order",
                name: "order",
                component: () => import("@/views/order/Order.vue"),
                meta: {
                    isAuth: true,   // 配置是否需要
                }
            },
            {
                path: "/order/my",
                name: "/myOrder",
                component: () => import("@/views/order/MyOrder.vue"),
                meta: {
                    isAuth: true,   // 配置是否需要
                }
            }
        ]
    },
]
// 路由
const router = createRouter({
    history: createWebHistory(),
    routes
})

// 注册一个全局前置守卫,检查是否登录
router.beforeEach((to, from, next) => {
    if(to.meta.isAuth) {    //判断当前路由是否需要进行权限控制
        if(sessionStorage.getItem('loginAccount') != null){    //权限控制的具体规则
            next()
        }else {
            ElMessageBox.alert("请先登录", '提示', {
                type:"warning",
                confirmButtonText: 'OK',
                callback: () => {
                    router.push('/login')
                },
             })
        }
    } else {
        next() // 放行
    }
})

// 导出
export default router
